<script setup>
import {Notification} from "@arco-design/web-vue";
import {
  IconArrowRight,
  IconArrowUp,
  IconDelete,
  IconDriveFile,
  IconFolder,
  IconUpload
} from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from "vue";
import apiAll from "@/api/apiAll.js";
import {file_column} from "@/utils/tableColumn.js";
import {formatDate, outSize} from "@/utils/common.js";
import uploadModal from './upload.vue'

const loading = ref(true)
const param = ref({
  up: false,
  path: null
})
const data = ref([])
const current = ref('')
const parent = ref('')
const uploadModalRef = ref()

const loadData = () => {
  loading.value = true
  apiAll.hostApi.fileList(param.value).then(res => {
    if (res.data && res.data.length > 0) {
      current.value = res.data[0].current
      parent.value = res.data[0].parent ? res.data[0].parent : ''
    }
    res.data.sort((a, b) => {
      if (a.isDir && b.isDir)
        return 0
      if (a.isDir && !b.isDir)
        return -1
      return 1
    })
    data.value = res.data
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}

const clickFile = (f) => {
  if (f.isDir) {
    param.value.path = f.path
    loadData()
  } else {
    let url = '/api/dir/open?path=' + encodeURIComponent(f.path)
    window.open(url)
  }
}
const inDir = () => {
  param.value.path = encodeURIComponent(current.value)
  loadData()
}
const upDir = () => {
  if (parent.value === '') {
    Notification.warning('已经是最上级目录了')
    return
  }
  param.value.path = encodeURIComponent(parent.value)
  loadData()
}
const showUpload = () => {
  uploadModalRef.value.show(current.value)
}
const del = (row) => {
  apiAll.hostApi.deleteFile(row.path).then(res => {
    Notification.success(res.msg)
    setTimeout(() => {
      loadData()
    }, 500)
  })
}
const download = (row) => {
  window.open('/api/dir/download?path=' + encodeURIComponent(row.path))
}

onMounted(() => {
  loadData()
})

</script>

<template>
  <div class="flex-column" style="min-width: 900px">
    <div class="flex-row" style="margin-bottom: 15px;align-items: center">
      <a-input v-model="current" :style="{width:'600px'}" placeholder="请输出目录路径"/>
      <a-button type="outline" style="margin-left: 20px" @click="inDir">
        <template #icon>
          <icon-arrow-right/>
        </template>
        <template #default>进入目录</template>
      </a-button>
      <a-button type="outline" style="margin-left: 20px" @click="upDir">
        <template #icon>
          <icon-arrow-up/>
        </template>
        <template #default>返回上一级</template>
      </a-button>
      <a-button type="outline" style="margin-left: 20px" @click="showUpload">
        <template #icon>
          <icon-upload/>
        </template>
        <template #default>上传文件</template>
      </a-button>
    </div>

    <a-table :columns="file_column" :data="data" :loading="loading" :pagination="false">
      <template #name="{ rowIndex, record }">
        <div @click="clickFile(record)" class="flex-row" style="align-items: center;cursor: pointer">
          <icon-drive-file v-if="!record.isDir" style="color: #8DDE83"/>
          <icon-folder v-if="record.isDir" style="color: #FFDC53"/>
          <b style="margin-left: 3px">{{ record.name }}</b>
        </div>
      </template>
      <template #isDir="{ rowIndex, record }">
        <b v-if="record.isDir" style="color:  #FFDC53">目录</b>
        <span v-if="!record.isDir" style="color: #8DDE83">文件</span>
      </template>
      <template #size="{ rowIndex, record }">
        {{ record.isDir ? '-' : outSize(record.size) }}
      </template>
      <template #lastModified="{ rowIndex, record }">
        {{ formatDate(record.lastModified) }}
      </template>

      <template #action="{ rowIndex, record }">
        <div class="flex-row">
          <a-popconfirm type="warning" content="确认删除？请谨慎操作" @ok="del(record)">
            <a-button type="outline" status="danger" size="mini">
              <template #icon>
                <icon-delete/>
              </template>
              <template #default>删除</template>
            </a-button>
          </a-popconfirm>
          <a-button v-if="!record.isDir" style="margin-left: 5px" type="outline" size="mini" @click="download(record)">
            <template #icon>
              <icon-delete/>
            </template>
            <template #default>下载</template>
          </a-button>
        </div>
      </template>
    </a-table>
    <uploadModal ref="uploadModalRef" @success="loadData"/>
  </div>
</template>

<style scoped>

</style>